<template functional>
  <div class="FunGetData">
    <el-row :gutter="20">
      <el-col :span="5">props:提供所有 prop 的对象</el-col>
      <el-col :span="19">{{props}}</el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row :gutter="20">
      <el-col :span="5">children:VNode 子节点的数组</el-col>
      <el-col :span="19">{{props.showChildren(children)}}</el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row :gutter="20">
      <el-col :span="5">slots:一个函数，返回了包含所有插槽的对象</el-col>
      <el-col :span="19">{{props.showSlots(slots())}}</el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row :gutter="20">
      <el-col :span="5">scopedSlots:(2.6.0+) 一个暴露传入的作用域插槽的对象。也以函数形式暴露普通插槽。</el-col>
      <el-col :span="19">{{scopedSlots}}</el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row :gutter="20">
      <el-col :span="5">data：传递给组件的整个数据对象，作为 createElement 的第二个参数传入组件</el-col>
      <el-col :span="19">{{data}}</el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row :gutter="20">
      <el-col :span="5">parent：对父组件的引用</el-col>
      <el-col :span="19">
        <span>
          {{props.showParent}}
        </span>
        {{props.showParent(parent)}}
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row :gutter="20">
      <el-col :span="5">listeners：(2.3.0+) 一个包含了所有父组件为当前组件注册的事件监听器的对象。这是 data.on 的一个别名。</el-col>
      <el-col :span="19">{{listeners}}</el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row :gutter="20">
      <el-col :span="5">injections：(2.3.0+) 如果使用了 inject 选项，则该对象包含了应当被注入的 property。</el-col>
      <el-col :span="19">{{props.showInjections(injections)}}</el-col>
    </el-row>
    <el-divider></el-divider>
  </div>
</template>

<script lang="ts">
// @ts-nocheck
export default {
  name: 'FunGetData',
  props:{
    showParent:{
      type: Function,
      default:(val)=>{
        console.log('showParent',val)
        return '66666'
      }
    },
    showInjections:{
      type: Function,
      default:(val)=>{
        console.log('showInjections',val)
        return '66666'
      }
    },
    showChildren:{
      type: Function,
      default:(val)=>{
        console.log('showChildren',val)
        return '66666'
      }
    },
    showSlots:{
      type: Function,
      default:(val)=>{
        console.log('showSlots',val)
        return '66666'
      }
    },
    showValue: {
      type:String,
      default: '5555'
    }
  },
  inject:['testData']
}
</script>

<style scoped lang="scss">
.FunGetData{
  color: green;
}
</style>
